<template>
  <div class="maproom">
    <header>
      <p>
        <router-link to="/newhouse">《</router-link>
      </p>
      <p>地图找房</p>
      <p>
        <span>...</span>
        <span>o</span>
      </p>
    </header>

    <main>
      <div class="form">
        <select v-model="selectCurriculums">
          <option v-for="(curriculum, index) in curriculums" :key="index">{{curriculum}}</option>
        </select>
        <p>
          <input v-model="search" />
          <button @click="onSearch">搜索</button>
        </p>
      </div>
      <div class="imggg">
        <img src="../../../../images/map-2.png" alt />
      </div>

      <div class="type">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" />
          <van-dropdown-item v-model="value2" :options="option2" />
          <van-dropdown-item v-model="value3" :options="option3" />
          <van-dropdown-item v-model="value4" :options="option4" />
        </van-dropdown-menu>
      </div>

      <div class="map-tab">
        <!-- <van-tabs>
        <van-tab title="买房">-->
        <baidu-map
          class="map"
          :center="{ lng: cityInfo.longitude, lat: cityInfo.latitude }"
          :zoom="8"
          :scroll-wheel-zoom="true"
        >
          <bm-map-type
            :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
            anchor="BMAP_ANCHOR_TOP_LEFT"
          ></bm-map-type>
          <!-- <input v-model="search" />
          <button @click="onSearch">搜索</button>-->

          <!-- 自定义覆盖物 ==> 可以遍历覆盖物  -->
          <bm-overlay
            :labelStyle="{ color: 'red', fontSize: '12px' }"
            title="Hover me"
            v-for="(item, idx) in data"
            :key="idx"
          >
            <!-- 文字 -->
            <bm-label
              :content="item.name"
              :position="{ lng: item.longitude, lat: item.latitude }"
              :labelStyle="{ color: 'red', fontSize: '12px' }"
              title="Hover me"
              @click="getCity(item)"
            />
            <!-- 圈 -->
            <bm-circle
              :center="{ lng: item.longitude, lat: item.latitude }"
              :radius="circlePath.radius"
              stroke-color="blue"
              :stroke-opacity="0.5"
              :stroke-weight="2"
              @lineupdate="updateCirclePath"
            ></bm-circle>
          </bm-overlay>
        </baidu-map>
      </div>
    </main>
  </div>
</template>


<script>
import axios from "axios";
export default {
  data() {
    return {
      selectCurriculums: "北京",
      curriculums: ["北京", "上海", "山东"],
      data: [],
      value1: "",
      option1: [
        { text: "户型", value: "" },
        { text: "公寓", value: "公寓" },
        { text: "别墅", value: "别墅" },
        { text: "二手房", value: "二手房" }
      ],
      value2: "",
      option2: [
        { text: "朝向", value: "" },
        { text: "东", value: "东" },
        { text: "西", value: "西" },
        { text: "南", value: "南" },
        { text: "北", value: "北" }
      ],
      //筛选数据
      value3: "价格",
      option3: [
        { text: "价格", value: "价格" },
        { text: "1万", value: "万" },
        { text: "20-30万", value: "20-30万" },
        { text: "30-50万", value: "30-50万" },
        { text: "50-100万", value: "50-100万" },
        { text: "100万", value: "100万" }
      ],
      value4: "区域",
      option4: [
        { text: "区域", value: "区域" },
        { text: "公寓", value: "公寓" },
        { text: "别墅", value: "别墅" },
        { text: "二手房", value: "二手房" }
      ],
      search: "",
      //地图默认的中心坐标
      cityInfo: {
        longitude: 116.404,
        latitude: 39.915
      },
      circlePath: {
        center: {
          lng: 116.404,
          lat: 39.915
        },
        radius: 10000
      }
    };
  },
  methods: {
    updateCirclePath(e) {
      this.circlePath.center = e.target.getCenter(); //更新圆心
      this.circlePath.radius = e.target.getRadius(); //更新半径
    },
    getCity(item) {
      console.log(item);
    },
    //点击搜索
    async onSearch() {
      //调用搜索城市接口 ==> 将输入框内的城市传递到后端
      const res = await axios.get("/api/changeCity", {
        params: { cityName: this.search }
      });
      //将子级城市数据赋值到data中
      this.data = res.data.area;
      //将输入城市数据复制给cityInfo
      this.cityInfo = res.data.data;
    }
  }
};
</script>

<style lang="scss" scoped>
.maproom {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    background-color: rgb(34, 100, 177);
    color: #fff;
    p:first-child {
      a {
        color: #fff;
      }
    }
    p:nth-child(3) {
      border: 1px solid rgb(226, 226, 226);
      width: 60px;
      height: 26px;
      border-radius: 26px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
  main {
    flex: 1;
    overflow-y: scroll;
    .imggg {
      width: 100%;
      height: 82px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .type {
      border-bottom: 2px solid rgb(119, 119, 119);
    }
    .form {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      width: 100%;
      height: 40px;
      border-radius: 4px;
      // background-color: rgb(209, 231, 241);
      // border: 1px solid rgb(180, 180, 180);
      color: rgb(43, 43, 43);
      select {
        color: rgb(158, 158, 158);
        border: none;
        background: none;
      }
      p {
        display: flex;
        align-items: center;
      }
    }

    .map {
      width: 100%;
      height: 400px;
    }
  }
}
</style>